<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jq.js"></script>
    <!--<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>-->
    <!--<style>-->
    <!--p{-->
    <!--color: o;-->
    <!--}-->
    <!--</style>-->
    <script>
        //等待文档加载完成再去执行
        // $(document).ready(function () {
        //     alert(5);
        // });
    </script>
</head>
<body>
<div>
    <ul>
        <li class="red" id="p1">red</li>
        <li class="green" id="li2">li2</li>
        <li class="red">red
        </li>
        <li class="green" id="p4">green</li>
        <li>
            <!--<ul>-->
                <!--<li id="li2">test1</li>-->
                <!--<li>test2</li>-->
            <!--</ul>-->
        </li>
    </ul>
</div>

<div>
    test1

</div>

<form>
    <!--<input value="rimi">-->
    全选<input type="checkbox">

</form>

<script>
    //val
    // $(':input:first').val('modify')
    //下面的邻居
    //jquery list的开始是0
    //gt greater than| lt less than
    // $('li:even').css('color','grey');
    // $('li:odd').css('color','orange');
    // $('#p1 + li').css('border','1px solid')
    //jquery开头的定式
    //jquery的标签选择器
    // $('p').css('border','1px solid');
    // $('.red').css('color',"red");
    // $('.green').css('color','green');
    // $('#p4').css('color','blue');
    // $("*").css('margin','0px');
    // '-->转义更强 "-->转义更弱

    //标签里面包含文本或者子元素
    // $("li:parent").css('color','blue')
    //必须是什么都没有的才叫empty
    // $("li:empty").css('background-color','blue')
    //至少要包含某个子元素 has括号里面的是子元素名称
    // $("div:has('li')").css('border','1px solid')
    // contains 包含不是严格的匹配
    // $("li:contains('red')").css('color','blue')
    // li标签里面排行第三个
    //nth-of-type 指定了type 先把li都给你抽出来 再排序
    // let a = $('li:nth-of-type(3)').css('background-color','blue')

    // $('ul li').css('border','1px solid');
    // //子元素
    // $('ul').children().css('border','1px solid');

    //选择后代

    // $('ul li').css('border', '1px solid');
    // //选择一个后代 *是正则的意思 *表示所有
    // $('ul').find('li:nth-child(1)').css('border', '1px solid');

    //父元素
    // $('#li2').parent().css('border', '1px solid');
    //所有父类
    // $('#li2').parents().css('border', '1px solid')
    //邻居
    // $('#li2 + li').css('background-color', 'green')
    // $('#li2').next().css('background-color', 'green')
    // $('#li2').prev().css('background-color', 'green')

    //选择到所有的邻居
    // $('#li2').siblings().css('background-color', 'green')

    //同时设置多个css的样式,使用set来操作
    // .css 就是去设置css样式
    //js InnerHtml  innerText
    // html会识别你输入的内容,如果是标签就会帮你换成标签,不会显示出来
    // $('#li2').html('<a href="#">点击我</a>');
    //text输入什么内容他就返回什么内容
    // $('#li2').text('<a href="#">点击我</a>');



    //等到文档加载完成 input里面的值修改就需要修改value属性
    //来修改

    //html
    //text
    //rquired checked selected关于标签的
    // $(":input").prop('checked',true)
    //attr设置class id
    //}
    // $(":input").attr('class','p1804')
    // $(":input").attr({'class':'p1804',"id":"account"})


</script>
</body>
</html>